@model List<zhangmenren.Models.ViewModle.WorksModel>
<div class="bg-white">
    <header class="mui-bar mui-bar-nav head-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" href='@Url.Action("Index","Home")'></a>
        <h1 class="mui-title">掌门人推荐</h1>
        <a class="mui-icon mui-icon-more mui-pull-right" onclick="jsBridge.share()"></a>
    </header>
    <style>
        body{
            background-color:#fff;
        }
    </style>
    <!--DOM -->
    <div class="mui-content bg-white">
        <!-- Swiper -->
        <div class="swiper-container excellent-banner-swiper">
            <div class="swiper-wrapper">
                @if (ViewBag.Banner != null && (ViewBag.Banner as List<BannerEntity>)?.Count > 0)
                {
                    foreach (var item in ViewBag.Banner as List<BannerEntity>)
                    {
                        <div class="swiper-slide">
                            <img class="swiper-lazy" data-src="@item.ImgUrl" />
                        </div>
                    }
                }
                else
                {
                    <div class="swiper-slide">
                        <img class="swiper-lazy" data-src="/images/index-banner-img1.jpg" alt="" />
                    </div>
                }
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <!---->
        <div class="search-item-box excellent-search-box">
            <span class="search-head mui-text-center">
                <a href="#middlePopover" style="color: #FFF;">
                    按名称
                </a>
            </span>
            <div class="search-body">
                <input type="text" placeholder="请输入搜索内容" class="j-souoval" />
            </div>
						@*<a href="javascript:;" class="j-souo">搜索</a>*@
        </div>
        <!---->
        <h2 class="header-title-item" style="margin: 10px 15px 0; ">
            精品课程
        </h2>
        <ul class="mui-table-view excellent-course-list">

            @foreach (var item in Model)
    {

        <li class="mui-table-view-cell mui-media">
            <a class="mui-navigate-right" href='@Url.Action("JingPInKC",new{id=item.Id})'>
                <div class="mui-media-object mui-pull-left">
                    <img src="@item.CoverImg">
                </div>
                <div class="mui-media-body">
                    <h5 class="mui-ellipsis-2">@item.Title</h5>
                    <p>@(item.Price > 0 ?"¥"+ item.Price.ToString("0.##"):"免费")</p>
                    <p>@item.GouMaiNum 人购买</p>
                </div>
            </a>
        </li>
}
           
            @*<li class="mui-table-view-cell mui-media">
                <a class="mui-navigate-right" href='excellent-course-content.html'>
                    <div class="mui-media-object mui-pull-left">
                        <img src="images/excellent-list-img1.jpg">
                    </div>
                    <div class="mui-media-body">
                        <h5 class="mui-ellipsis-2">smart3D EPS SSK 课程</h5>
                        <p>￥232.80 </p>
                        <p>23人购买</p>
                    </div>
                </a>
            </li>*@
        </ul>
    </div>

    <div id="middlePopover" class="mui-popover" style="width: 115px;">
        <div class="mui-popover-arrow"></div>
        <ul class="mui-table-view exco-popover-list">
            <li class="mui-table-view-cell">
                <a href="javascript:;">按价格</a>
            </li>
            <li class="mui-table-view-cell">
                <a href="javascript:;">按购买数</a>
            </li>
            <li class="mui-table-view-cell">
                <a href="javascript:;">按分类</a>
            </li>
        </ul>
    </div>
</div>
@section Scripts{
    <script>var swiper = new Swiper('.swiper-container', {
            slidesPerView: 3,
            speed: 700,
            spaceBetween: 0,
            slidesPerView: 'auto',
            centeredSlides: true,
            loop: true,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            //          autoplay: {
            //              delay: 3000,
            //              stopOnLastSlide: false,
            //              disableOnInteraction: false,
            //          },
            lazy: {
                loadPrevNext: true,
                loadOnTransitionStart: false,
                loadPrevNextAmount: 1,
            },
        });

        swiper.lazy.load();
				
							$(".j-souo").click(function () {
									$.ajax({
										type:'post',
										url:'@Url.Action("Search")',
										data:{key:$.trim($('.j-souoval').val())},
										success:function(result){
											if (result.state=="ok") {
												var htmls='';
												if (result.data.length>0) {
													for (let i = 0; i < result.data.length; i++) {
														var str=(result.data[i].price-0)==0?'免费': '￥'+ result.data[i].price;
														htmls+='<li class="mui-table-view-cell mui-media"><a class="mui-navigate-right" href="/YuanChengJX/Detail?id='+result.data[i].id+'"><div class="mui-media-object mui-pull-left"><img src="'+result.data[i].coverImg+'"></div><div class="mui-media-body"><h5 class="mui-ellipsis-2">'+result.data[i].title+'</h5><p>'+str+' </p><p>'+result.data[i].gouMaiNum+'人购买</p></div></a></li>';
													
													}
												}else{
													htmls="<span>暂无数据</span>"
												}
												$('.excellent-course-list').html(htmls);
											}
											
										}
									})
								})	
				
				
				</script>


}